import './index.scss';
import React, { Component } from 'react';
import Container from 'components/Container';
import Button from 'components/Button';
import { loadingOn, loadingOff } from 'components/Loading';
import qs from 'qs';
import Toast from 'components/Toast';
import services from 'services';

class Page extends Component {
	state = {
		comment: '',
		rankings: [
			{
				label: '总体评价',
				ranking: 0,
			},{
				label: '回复速度',
				ranking: 0,
			}, {
				label: '服务态度',
				ranking: 0,
			}
		],
		isSubmitDisabled: false,
		inited: false,
		isAlreadyRanked: false,
		crmAvatar: '',
		crmNickname: ''
	}

	componentWillMount () {
		let { messageId, cussImuid, crmNickname, crmAvatar } = qs.parse(location.href.split('?')[1]);

		if ([ messageId, cussImuid, crmNickname, crmAvatar].includes(undefined)) {
			Toast({delay:2000,text:'啊哦，页面参数丢失，请您重新打开本页'});
			return setTimeout(() => (location.href = 'jzapp://close_web_page'), 2000);
		}

		this.messageId = messageId;
		this.cussImuid = cussImuid;
		this.setState({ crmAvatar, crmNickname });

		services.API.get(`/serve/cuss/cussComment/commentDetail`, { params: { messageId, cussImuid } }).then(res => {
			let { data, code } = res.data;

			if (code !== 0) {
				Toast({delay:2000,text:'啊哦，服务器出错了~ 即将返回上一页'});
				return setTimeout(() => (location.href = 'jzapp://close_web_page'), 2000);
			}

			if (data.isComment) {
				let { commentRate, replyRate, serveRate, content } = data.data;

				this.setState({
					inited: true,
					isAlreadyRanked: true,
					comment: content,
					rankings: [
						{
							label: '总体评价',
							ranking: commentRate,
						},{
							label: '回复速度',
							ranking: replyRate,
						}, {
							label: '服务态度',
							ranking: serveRate,
						}
					]
				});
			}
			else {
				this.setState({ inited: true, isAlreadyRanked: false });
			}
		});
	}

	next = () => {
		let { rankings, comment } = this.state;
		let [commentRate, replyRate, serveRate] = rankings;

		if (rankings[0].ranking === 0) return Toast({delay:2000,text:'请您评价总体评价'});
		if (rankings[1].ranking === 0) return Toast({delay:2000,text:'请您评价回复速度'});
		if (rankings[2].ranking === 0) return Toast({delay:2000,text:'请您评价服务态度'});
		if (comment.length > 300) return Toast({delay:2000,text:'小主~评论只能最多输入300字哦'}); 

		loadingOn();

		services.API.post(`/serve/cuss/cussComment/userCommentCuss`, {
			messageId: this.messageId,
			cussImuid: this.cussImuid,
			content: comment,
			serveRate: serveRate.ranking,
			replyRate: replyRate.ranking,
			commentRate: commentRate.ranking,
		})
		.then(res => {
			let { code, msg } = res.data;

			if (code === 0) {
				Toast({delay:2000,text:'评价已提交，感谢您的评价，即将返回上一页'});
				setTimeout(() => (location.href = 'jzapp://close_web_page'), 2000);
			}
			else {
				Toast({delay:2000,text: msg});
			}
		})
		.finally(e => loadingOff());
	}

	updateRanking = (rankingItem, starIndex) => {
		if (this.state.inited === false || this.state.isAlreadyRanked) return;

		let newRankings = JSON.parse(JSON.stringify(this.state.rankings));
		newRankings[newRankings.findIndex(i => i.label === rankingItem.label)] = { ...rankingItem, ranking: starIndex+1 };
		this.setState({ rankings: newRankings });
	}

	handleCommentChange = e => {
		if (this.state.inited === false || this.state.isAlreadyRanked) return;
		this.setState({ comment: e.target.value });
	}

	render () {
		let { isSubmitDisabled, rankings, comment, inited, isAlreadyRanked, crmAvatar, crmNickname } = this.state;

		return (
			<div className="misc-crm-ranking">
					<Container>
						<div className="card intro">
							<div className="avatar">
								<img src={crmAvatar}/>
							</div>
							<div className="name">{crmNickname}</div>
							{ isAlreadyRanked && <div className="status">已评价</div> }
						</div>

						<div className="card ranking">
							<div className="ranking-hd">
								<h2 className="title">评价客服</h2>
								<small>满意请给5星噢</small>
							</div>
							<div className="ranking-bd">
								{
									rankings.map((rank, index) => {
										return (
											<div className="stars" key={index}>
												<div className="stars-label">{rank.label}</div>
												<div className="stars-list">
													{
														(new Array(5)).fill(null).map((_, starIndex) => {
															return (
																<div 
																	className={`stars-list-item ${starIndex < rank.ranking ? 'active' : ''}`} 
																	key={starIndex}
																	onClick={this.updateRanking.bind(this, rank, starIndex)}
																></div>
															);
														})
													}
												</div>
											</div>
										);
									})
								}
								
								<textarea placeholder="您的评价会帮助我们做的更好" onChange={this.handleCommentChange} value={comment} readOnly={isAlreadyRanked}>{comment}</textarea>
							</div>
						</div>
						
						{
							inited && !isAlreadyRanked && (
								<Button
									type={`block primary`} 
									disabled={rankings.some(i => i.ranking === 0) || isSubmitDisabled} 
									onClick={() => { !isSubmitDisabled && this.next() }}
								>
										发表
								</Button>
							)
						}
					</Container>
			</div>
		);
	}
}

export default Page;